<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>热榜</title>
</head>

<div th:fragment="hotlist">
	<link rel="stylesheet" href="../static/css/hotlist.css" th:href="@{/css/hotlist.css}">
	<script src="../static/js/hotlist.js" th:src="@{/js/hotlist.js}"></script>
	 <div class="Topstory-content">
        <div class="ListShortcut">
            <div class="HotList">
                <div class="HotList-nav">
                    <a class="HotList-navItem is-active" href="#">全站</a>
                    <a class="HotList-navItem" href="#">科学</a>
                    <a class="HotList-navItem" href="#">数码</a>
                    <a class="HotList-navItem" href="#">体育</a>
                    <a class="HotList-navItem" href="#">时尚</a>
                    <a class="HotList-navItem" href="#">影视</a>
                </div>
                <div class="HotList-List" th:each="question,questionStat:${questionList}">
                    <section class="HotItem" tabindex="0">
                        <div class="HotItem-index">
                            <!-- 热度没有前3的没有HotItem-hot -->
                            <div class="HotItem-rank HotItem-hot" th:text="${questionStat.count}">1</div>
                            <!-- 不是新的就可以删除 -->
                            <div class="HotItem-label" style="background-color: rgb(255,150,7);">新
                            </div>
                        </div>
                        <div class="HotItem-content">
                            <!-- noreferrer 标记在单击链接时隐藏引用者信息,防止网络钓鱼攻击 -->
                            <!-- noopener一般都是搭配 target="_blank"同时使用,因为 target="_blank" 也是一个安全漏洞 -->
                            <a th:href="@{'http://localhost:8080/questionPage?questionid='+${question.id}}" th:title="${question.questionname}" title="孙红雷回归后的《极限挑战》变好看了吗？" target="_blank" rel="noopener noreferrer">
                                <h2 class="HotItem-title" th:text="${question.questionname}">孙红雷回归后的《极限挑战》变好看了吗？</h2>
                                <div class="HotItem-excerpt HotItem-excerpt--multiLine" th:utext="${question.questiondescribe}">
                                    如何评价东方卫视《极限挑战》第五季第八期？看完后你有什么样的感受？
                                    相关问题：看完《东方卫视极限挑战》第五季第七集，你有什么想说的？ 怎样看待孙红雷将回归东方卫视《极限挑战》第五季？
                                </div>
                            </a>
                            <div class="HotItem-metrics HotItem-metrics--bottom">
                                <svg class="Zi Zi--Hot" fill="currentColor" viewBox="0 0 24 24" width="18" height="18">
                                    <defs>
                                        <linearGradient id="id-2014200654-a" x1="63.313%" x2="46.604%" y1="-13.472%"
                                            y2="117.368%">
                                            <stop offset="2.35%" stop-color="#EC471E"> </stop>
                                            <stop offset="100%" stop-color="#FF6DC4"></stop>
                                        </linearGradient>
                                    </defs>
                                    <path fill="url(#id-2014200654-a)"
                                        d="M14.553 20.78c.862-.651 1.39-1.792 1.583-3.421.298-2.511-.656-4.904-2.863-7.179.209 2.291.209 3.73 0 4.314-.41 1.143-1.123 1.983-1.91 2.03-1.35.079-2.305-.512-2.863-1.774-.676 1.25-.782 2.556-.318 3.915.31.906.94 1.684 1.89 2.333C7.144 20.131 5 17.336 5 14.022c0-2.144.898-4.072 2.325-5.4.062 2.072.682 3.598 2.13 4.822-.67-1.112-.734-2.11-.734-3.517 0-3.253 2.067-6.007 4.913-6.927a7.35 7.35 0 0 0 2.157 4.918C17.722 9.214 19 11.463 19 14.022c0 3.073-1.844 5.7-4.447 6.758z"
                                        fill-rule="evenodd"></path>
                                </svg>
                                767万领域热度
                                <span class="HotItem-action">
                                    <div class="Popover">
                                        <div class="ShareMenu-toggler" id="Popover52-toggle" aria-haspopup="true"
                                            aria-expanded="false" aria-owns="Popover-content">
                                            <img class="ShareMenu-fakeQRCode" src="#" alter="微信二维码">
                                            <button type="button"
                                                Class="Button Button--plain Button--withIcon Button--withLabel">
                                                <span style="display:inline-flex;align-items:center;">
                                                    &#8203;
                                                    <svg class="Zi Zi--Share Button-zi" fill="currentColor"
                                                        viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                        <path
                                                            d="M2.931 7.89c-1.067.24-1.275 1.669-.318 2.207l5.277 2.908 8.168-4.776c.25-.127.477.198.273.39L9.05 14.66l.927 5.953c.18 1.084 1.593 1.376 2.182.456l9.644-15.242c.584-.892-.212-2.029-1.234-1.796L2.93 7.89z"
                                                            fill-rule="evenodd"></path>
                                                    </svg>
                                                </span>
                                                分享
                                            </button>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <a class="HotItem-img" href="#" title="孙红雷回归后的《极限挑战》变好看了吗？" target="_blank"
                            rel="noopenner noreferrer" th:title="${question.questionname}">
                            <img src="./孙红雷.jpg" alt="孙红雷回归后的《极限挑战》变好看了吗？" th:alt="${question.questionname}">
                        </a>
                    </section>
                </div>
                <div class="HotList-end"></div>
            </div>
        </div>
    </div>
</div>
